import { Link } from 'umi';
import { useBlogStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '../components/ui/card';
import { CardHoverEffect } from '../components/ui/card-hover-effect';
import { CardStack } from '../components/ui/card-stack';
import { Button } from '../components/ui/button';
import { motion } from 'framer-motion';

export default function HomePage() {
  // 使用zustand状态管理
  const { posts, incrementLikes, incrementViews } = useBlogStore(
    useShallow((state) => ({
      posts: state.posts,
      incrementLikes: state.incrementLikes,
      incrementViews: state.incrementViews,
    })),
  );

  // 获取精选文章
  const featuredPosts = posts.slice(0, 3); // 使用前3篇文章作为精选文章
  return (
    <div className="space-y-12">
      <motion.div
        className="text-center py-10"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <h1 className="text-4xl font-bold mb-4">欢迎来到我的博客</h1>
        <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          这是一个使用 Umi + Tailwind CSS + Framer Motion 构建的博客网站。
          在这里，我会分享我的技术心得、学习笔记和个人感悟。
        </p>
      </motion.div>

      <section>
        <h2 className="text-2xl font-bold mb-6">精选文章</h2>

        <CardHoverEffect
          items={featuredPosts.map((post) => ({
            id: post.id,
            title: post.title,
            description: post.excerpt,
            link: `/posts/${post.id}`,
            tags: post.tags,
          }))}
        />
      </section>

      <section className="py-10">
        <h2 className="text-2xl font-bold mb-6">最新文章</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {posts.slice(0, 6).map((post) => (
            <Card key={post.id} className="h-full">
              <CardHeader>
                <CardTitle>
                  <Link to={`/posts/${post.id}`} className="hover:text-blue-600 transition-colors">
                    {post.title}
                  </Link>
                </CardTitle>
                <CardDescription>{post.date}</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="line-clamp-3">{post.excerpt}</p>
                <div className="flex flex-wrap gap-2 mt-3">
                  {post.tags.map((tag) => (
                    <span
                      key={tag}
                      className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <div className="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
                  <span className="flex items-center">
                    <span className="material-icons text-sm mr-1">visibility</span> {post.views}
                  </span>
                  <span className="flex items-center">
                    <span className="material-icons text-sm mr-1">favorite</span> {post.likes}
                  </span>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    incrementLikes(post.id);
                    incrementViews(post.id);
                  }}
                >
                  阅读更多
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </section>

      <section className="py-10 bg-gray-50 dark:bg-gray-800 -mx-6 px-6">
        <h2 className="text-2xl font-bold mb-6">推荐阅读</h2>
        <div className="h-[400px] w-full">
          <CardStack
            items={featuredPosts.slice(0, 3).map((post) => ({
              id: post.id,
              name: post.title,
              designation: post.date,
              content: (
                <div className="bg-white dark:bg-gray-700 p-6 rounded-xl shadow-lg h-full flex flex-col">
                  <h3 className="text-xl font-bold mb-2">{post.title}</h3>
                  <p className="text-gray-600 dark:text-gray-300 mb-4 flex-1">{post.excerpt}</p>
                  <div className="flex justify-between items-center">
                    <div className="text-sm text-gray-500 dark:text-gray-400">{post.date}</div>
                    <Link to={`/posts/${post.id}`} className="text-blue-600 hover:underline">
                      阅读全文
                    </Link>
                  </div>
                </div>
              ),
            }))}
          />
        </div>
      </section>
    </div>
  );
}
